<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/style.css">
    <script src="js/index.js"></script>
    <script src="js/echarts.js"></script>

    <title>天勤科技-前端考核题</title>
</head>
<body>
    <!-- 文字导航栏模块 -->
    <header>
        <img class="logo" src="img/logo.png" alt="logo">
        <nav>
            <li class="first_nav">
                <a href="#">设置</a>
                <a href="#">通知</a>
                <a href="#"><button>登录</button></a>
            </li>
        </nav>
    </header>

    <!-- 标题导航栏 -->
    <div class="bd container">
        <div class="content_title">
            <h2>大标题</h1>
            <h4>副标题</h4>
        </div>
        <nav>
            <ol>
                <li><a href="#">demo1</a></li>
                <li><a href="#">demo2</a></li>
                <li><a href="#">demo3</a></li>
                <li><a href="#">demo4</a></li>
                <li><a href="#">demo5</a></li>
            </ol>
        </nav>
    </div>

    <!-- 轮播图+请求表模块 -->
    <div class="slide_line container">
        <div class="slide_box">
            <img src="img/1.jpg" alt="">
            <img src="img/2.jpg" alt="">
            <img src="img/3.jpg" alt="">
            <img src="img/1.jpg" alt="">
            <ul>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
        <div class="hotpot">
            <div class="tab_title">
                <div id="tab_name"></div>
                <button>查看全部</button>
            </div>
            <table>
                <thead>
                    <tr>
                        <th>请求时间</th>
                        <th>用户名</th></th>
                        <th>状态</th>
                    </tr>
                </thead>
                <tbody>
                    
                </tbody>
            </table>
        </div>
    </div>

    <!-- 曲线图模块 -->
    <div class="echar1 container">
        <div id="curve">
        </div>
    </div>

    <!-- 饼状/柱状图模块 -->
    <div class="echar2 container">
        <div class="pie">
            <div id="pie">
            </div>
        </div>

        <div class="bar_chart">
            <div id="bar_chart"></div>
        </div>
    </div>
    <!-- 底栏模块 -->
    <div class="f_box">
            <footer>
            <img class="logo" src="img/logo.png" alt="logo">
            <div class="footers">
                <div class="containers">
                    <div class=" footers-links">
                        <a href="#">test</a>
                        <a href="#">test </a>
                        <a href="#">test</a>
                        <a href="#">test</a>
                    </div>
                    <div class=" footers-links">
                        <a href="#">test</a>
                        <a href="#">test </a>
                        <a href="#">test</a>
                        <a href="#">test</a>
                    </div>
                    <div class=" footers-links">
                        <a href="#">test</a>
                        <a href="#">test </a>
                        <a href="#">test</a>
                        <a href="#">test</a>
                    </div>
                    <div class=" footers-links">
                        <a href="#">test</a>
                        <a href="#">test </a>
                        <a href="#">test</a>
                        <a href="#">test</a>
                    </div>
                    <div class=" footers-links">
                        <a href="#">test</a>
                        <a href="#">test </a>
                    </div>
                    <div class="clearfix"></div>
                </div>
            </div>
    </footer>
    </div>

</body>
<script>
    var curve_chartDom = document.getElementById('curve');
    var curve_myChart = echarts.init(curve_chartDom);
    var curve_option;
    var pie_chartDom = document.getElementById('pie');
    var pie_myChart = echarts.init(pie_chartDom);
    var pie_option;
    var bar_chartDom = document.getElementById('bar_chart');
    var bar_myChart = echarts.init(bar_chartDom);
    var bar_option;

    // 曲线图表的配置项和数据
    curve_option = {
        title: {
            text: '曲线图数据展示',
            left: 'center'
          },
    xAxis: {
        type: 'category',
        data: ["10/12","10/13","10/14","10/15","10/16","10/17","10/18","10/19",
        "10/20","10/21","10/22","10/23","10/24","10/25","10/26","10/27","10/28",
        "10/29","10/30","10/31","11/01","11/02","11/03","11/04","11/05","11/06",
        "11/07","11/08","11/09","11/10"]
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [9952,6133,3006,3521,8886,5971,8305,122,5201,2467,1748,6949,9854,
        611,1825,4085,7365,5203,981,9499,237,3077,5739,5633,9845,562,2382,8826,
        9348,6551],
        type: 'line',
        smooth: true,
        }]
    };

    // 饼状图表的配置项和数据  
    pie_option = {
      title: {
        text: '饼状图数据展示',
        left: 'center'
      },
      tooltip: {
        trigger: 'item'
      },
      series: [{
          name: '所占比',
          type: 'pie',
          radius: '50%',
          data: [
            { value: 2, name: 'Mon' },
            { value: 3, name: 'Tus' },
            { value: 1, name: 'Wed' },
            { value: 4, name: 'Thu' },
            { value: 5, name: 'Fri' },
            { value: 6, name: 'Sat' },
            { value: 2, name: 'Sun' }
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    };


    // 曲线图表的配置项和数据
bar_option = {
    title: {
            text: '柱状图数据展示',
            left: 'center'
        },
            tooltip: {
            trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        }
    },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
    },
    xAxis: [{
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        axisTick: {
        alignWithLabel: true
        }
    }],
    yAxis: [{
        type: 'value'
    }],
    series: [{
        name: '数量',
        type: 'bar',
        barWidth: '30%',
        data: [2, 3,1, 4, 5, 6, 2]
    }]
};

bar_option && bar_myChart.setOption(bar_option);
pie_option && pie_myChart.setOption(pie_option);
curve_option && curve_myChart.setOption(curve_option);
</script>
</html>